<template>
  <div>
    <h3>{{ $t('greeting.hello') }}</h3>
    <el-upload
      class="avatar-uploader"
      :action="actionUrl"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload"
    >
      <el-button
        >上传
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-button>
    </el-upload>
    <component :is="componentId"></component>
    <div class="echarts-container" ref="container"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { Plus } from '@element-plus/icons-vue'
import _ from 'lodash'
import { onMounted, ref } from 'vue'
import moment from 'moment'
import { defineAsyncComponent } from 'vue'
const componentId = defineAsyncComponent(() => import('http://192.168.2.6:3000/public/card-two.js'))
const container = ref()
const init = () => {
  const myChart = echarts.init(container.value)
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  })
}
onMounted(() => {
  const str = _.join(['hello', 'world', 'use', 'lodash'], ' ')
  console.log(str)
  const now = moment()
  console.log(now)
  init()
})
const actionUrl = ref('http://192.168.2.6:3000/file')
const beforeUpload = async (rawFile: any) => {
  console.log(rawFile)
  const formData = new FormData()
  formData.append(rawFile.name, rawFile)
  const xhr = new XMLHttpRequest()
  xhr.open('post', actionUrl.value)
  xhr.send(formData)
  return false
}
const uploadSuccess = () => {}
</script>
<style lang="scss" scoped>
.echarts-container {
  width: 500px;
  height: 500px;
}
</style>
